<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../css/sel_home.css">
    <title>销售商</title>
</head>

<body>
<div id="selBox">
    <div id="header">
        <span id="welcome"> 欢 迎 使 用 药 品 溯 源 系 统 </span>
        <input type="button" class="logoutBtn" value="退出" @click="logout" />
    </div>
    <el-row class="tac">
        <el-col :span="6">
            <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" @click="change1">
                    <i class="el-icon-document"></i>
                    <span slot="title">药品购买数据</span>
                </el-menu-item>
                <el-menu-item index="2" @click="change2">
                    <i class="el-icon-document"></i>
                    <span slot="title">消费者数据</span>
                </el-menu-item>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-s-data"></i>
                        <span slot="title">药品溯源</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="change3">药品购买数据溯源</el-menu-item>
                        <el-menu-item index="3-2" @click="change4">消费者数据溯源</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="4" @click="change5">
                    <i class="el-icon-user"></i>
                    <span slot="title">个人中心</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="11" :offset="3">
            <div class="rightPage">
                <!-- 药品购买数据 -->
                <el-form ref="form1" label-position="left" :model="form1" label-width="120px" v-show="isShow==1">
                    <el-form-item label="药品名称">
                        <el-select v-model="selectForm.drugName" filterable placeholder="请选择药品名称"
                                   @change="selectDrug" @change="$forceUpdate()">
                            <el-option v-for="item in form1.drugName" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="药品生产商名称">
                        <el-select v-model="selectForm.manName" filterable placeholder="请选择药品生产商名称"
                                   @change="selectManName" @change="$forceUpdate()">
                            <el-option v-for="item in form1.manName" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="药品批号">
                        <el-select v-model="selectForm.batchNum" filterable placeholder="请选择药品批号"
                                   @change="getCode" @change="$forceUpdate()">
                            <el-option v-for="item in form1.batchNum" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="药品溯源编码">
                        <el-col :span="12">
                            <el-input v-model="form1.traceableCode" disabled></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="到达日期">
                        <el-col :span="12">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form1.ard"
                                            value-format="timestamp" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="附加信息">
                        <el-col :span="12">
                            <el-input type="textarea" v-model="form1.other"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3" :offset="9">
                            <el-button type="primary" @click="onSubmit1">保存</el-button>
                        </el-col>
                    </el-form-item>
                </el-form>

                <!-- 消费者数据 -->
                <el-form ref="form2" label-position="left" :model="form2" label-width="120px" v-show="isShow==2">
                    <el-form-item label="消费者姓名">
                        <el-col :span="12">
                            <el-input v-model="form2.consumer"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-col :span="12">
                            <el-radio v-model="form2.sex" label="0">男</el-radio>
                            <el-radio v-model="form2.sex" label="1">女</el-radio>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-col :span="12">
                            <el-input v-model="form2.idNumber"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-col :span="12">
                            <el-input v-model="form2.contact"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="所购药品名称">
                        <el-select v-model="selectCon.drugName" filterable placeholder="请选择药品名称"
                                   @change="selectDn" @change="$forceUpdate()">
                            <el-option v-for="item in form2.drugName" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="购买日期">
                        <el-col :span="12">
                            <el-date-picker type="date" placeholder="选择日期" value-format="timestamp"
                                            v-model="form2.cond" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="药品批号">
                        <el-select v-model="selectCon.batchNum" filterable placeholder="请选择药品批号" @change="selectBn"
                                   @change="$forceUpdate()">
                            <el-option v-for="item in form2.batchNum" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="药品溯源编码">
                        <el-col :span="12">
                            <el-input v-model="form2.traceableCode" disabled></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="附加信息">
                        <el-col :span="12">
                            <el-input type="textarea" v-model="form2.other"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3" :offset="9">
                            <el-button type="primary" @click="onSubmit2">保存</el-button>
                        </el-col>
                    </el-form-item>
                </el-form>

                <!-- 药品购买数据溯源 -->
                <el-form ref="sch1" :model="sch1" v-show="isShow==3">
                    <el-form-item>
                        <el-col :span="3">
                            <span>药品溯源编码</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch1.traceableCode"></el-input>
                        </el-col>
                        <el-col :span="3" :offset="2">
                            <span>药品名称</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch1.drugName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3">
                            <span>药品批号</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch1.batchNum"></el-input>
                        </el-col>
                        <el-col :span="3" :offset="2">
                            <span>起始购买日期</span>
                        </el-col>
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sch1.beginDate"
                                            value-format="timestamp" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3">
                            <span>终止购买日期</span>
                        </el-col>
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sch1.endDate"
                                            value-format="timestamp" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3" :offset="19">
                            <el-button @click="cleanForm">清空</el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="success" @click="search1">查询</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="selTable" border style="width: 100%">
                            <el-table-column fixed label="序号" width="50"  max-height="250">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                            </el-table-column>
                            <el-table-column prop="drugName" label="药品名称" width="120">
                            </el-table-column>
                            <el-table-column prop="manName" label="药品生产商名称" width="125">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="100">
                            </el-table-column>
                            <el-table-column prop="ard" label="到达日期" width="102">
                            </el-table-column>
                            <el-table-column prop="other" label="附加信息" width="140">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>

                <!-- 消费者数据溯源 -->
                <el-form ref="sch2" :model="sch2" v-show="isShow==4">
                    <el-form-item>
                        <el-col :span="3">
                            <span>药品溯源编码</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch2.traceableCode"></el-input>
                        </el-col>
                        <el-col :span="3" :offset="2">
                            <span>药品名称</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch2.drugName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3">
                            <span>药品批号</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch2.batchNum"></el-input>
                        </el-col>
                        <el-col :span="3" :offset="2">
                            <span>消费者姓名</span>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="sch2.consumer"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3">
                            <span>起始购买日期</span>
                        </el-col>
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sch2.beginDate"
                                            value-format="timestamp" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="3" :offset="2">
                            <span>终止购买日期</span>
                        </el-col>
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sch2.endDate"
                                            value-format="timestamp" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3" :offset="19">
                            <el-button @click="cleanForm">清空</el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="success" @click="search2">查询</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-table :data="conTable" border style="width: 100%"  max-height="250">
                            <el-table-column fixed label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                            </el-table-column>
                            <el-table-column prop="consumer" label="消费者姓名" width="100">
                            </el-table-column>
                            <el-table-column prop="sex" label="性别" width="50">
                            </el-table-column>
                            <el-table-column prop="drugName" label="所购药品名称" width="120">
                            </el-table-column>
                            <el-table-column prop="batchNum" label="药品批号" width="100">
                            </el-table-column>
                            <el-table-column prop="idNumber" label="身份证号" width="130">
                            </el-table-column>
                            <el-table-column prop="contact" label="联系方式" width="120">
                            </el-table-column>
                            <el-table-column prop="cond" label="购买日期" width="120">
                            </el-table-column>
                            <el-table-column prop="other" label="附加信息" width="150">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>

                <!-- 个人中心 -->
                <el-form ref="form4" :model="form4" v-show="isShow==5">
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>用户名</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form4.username }}</span>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-button @click="pwdOpen = true">修改密码</el-button>
                            <el-dialog title="修改密码" :visible.sync="pwdOpen">
                                <el-form :model="pwdForm">
                                    <el-form-item label="原密码" :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-input v-model="pwdForm.oldPwd" autocomplete="off"></el-input>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="新密码" :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-input v-model="pwdForm.newPwd" autocomplete="off"></el-input>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelChangePwd">取 消</el-button>
                                    <el-button type="primary" @click="changePwd">确 定</el-button>
                                </div>
                            </el-dialog>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>手机号码</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form4.phoneNumber }}</span>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-button @click="phoOpen = true">点击修改</el-button>
                            <el-dialog title="修改手机号码" :visible.sync="phoOpen">
                                <el-form :model="phoForm">
                                    <el-form-item label="新手机号码" :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-input v-model="phoForm.param" autocomplete="off"></el-input>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelChangePho">取 消</el-button>
                                    <el-button type="primary" @click="changePho">确 定</el-button>
                                </div>
                            </el-dialog>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>销售商名称</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form4.selName }}</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>地址</strong></span>
                        </el-col>
                        <el-col :span="20">
                            <span>{{ form4.address }}</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>负责人</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form4.legal }}</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="4">
                            <span><strong>负责人身份证号</strong></span>
                        </el-col>
                        <el-col :span="8">
                            <span>{{ form4.idNumber }}</span>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../../js/sel_home.js"></script>
</body>

</html>